<template>
    <div class="card rela h-100" v-show="visible">
        <div class="close" @click="close">
            <img
                    src="@assets/images/bujianMap/close.png"
                    alt=""
            />
        </div>
        <div class="list h-100">
            <template v-for="(item, index) in listItem">
                <div :key="index" class="list-group flex">
                    <template v-if="item.type === 'line'">
                    </template>
                    <template v-else>
                        <div class="title">
                            {{ item.title }} :
                        </div>
                    </template>
                    <div class="text flex-1">
                    
                        <template v-if="item.type === 'record'">
                                {{ info[item.key] || '' }}
                                <span v-if="info[item.key]" class="record">(历史记录)</span>
                        </template>
                        <template v-else-if="item.type === 'dan'">
                            <span class="dan">{{ info[item.key] || '' }}</span>
                        </template>
                        <template v-else-if="item.type === 'pic'">
                            <img v-if="info[item.key]" class="pic" :src="info[item.key]" @click="showPic(info[item.key])">
                        </template>
                        <template v-else-if="item.type === 'line'">
                            <div class="line"></div>
                        </template>
                        <template v-else>
                            {{ info[item.key] || '' }}
                        </template>
                    </div>
                </div>
            </template>
        </div>
        <div class="showPic" v-show="showPicUrl" @click="hidePic">
            <el-image :src="showPicUrl" fit="cover"  alt="" />
        </div>
    </div>
</template>

<script>
    // import {queryBuJianDetail} from "@/api";
    import Bus from '@/untils/bus'
    export default {
        name: "bujianDetail",
        props: {
            isShowLaw: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                visible: false,
                info: {},
                listItem: [
                    { title: '部件名称', key: 'objName' },
                    { title: '部件所属类型', key: 'typeSubName' },
                    { title: '部件当前状态', key: 'objState' },
                    { title: '部件是否固定', key: 'usestate' },
                    { title: '部件来源', key: 'dataSource' },
                    { title: '所属部门', key: 'deptName1' },
                    { title: '执法部门', key: 'deptName2' },
                    { title: '执法队伍', key: 'deptName3' },
                    { title: '部件位置', key: 'coordinates' },
                    { title: '上报问题次数', key: '', type: 'record' },
                    { title: '案件发生频率', key: '', type: 'dan' },
                    { title: '', key: '', type: 'line' },
                    { title: '部件图片', key: 'picture', type: 'pic' },
                ],
                showPicUrl: ''
            }
        },
        computed: {
        },
        mounted() {
            // todo 接收- 部件地图右侧详情页面， --  查看详情
            Bus.$on('bujianMapDetail', data => {
                this.close()
                if (data.id) {
                    this.getDetail(data)
                }
            })
        },
        methods: {
            open() {
                this.visible = true
                this.changeVisible()
            },
            close() {
                this.visible = false
                this.info = {}
                this.changeVisible()
                this.$emit('close')
            },
            changeVisible() {
                this.$emit('changeVisible', this.visible)
            },
            getDetail(data) {
                this.info =  data || {}
                this.open()
                // queryBuJianDetail({
                //     id: item.id
                // }).then(res => {
                //     if (res.code == 200) {
                //         this.detailInfo =  res.data || {}
                //         this.open()
                //     }
                // }).catch(err => {
                // })
            },
            showPic(url) {
                this.showPicUrl = url
            },
            hidePic() {
                this.showPicUrl = ''
            }
        }
    }
</script>

<style lang="less" scoped>
    .rela{
        position: relative;
    }
    .card .close{
        position: absolute;
        top: 10px;
        right: 10px;
    }
    .flex-1{
        flex: 1;
    }
    .h-100{
        height: 100%;
    }
    ::-webkit-scrollbar{
        display: none;
    }
.list{
    height: 100%;
    overflow-y: auto;
    padding-top: 30px;
}
    .list-group{
        margin-bottom: 36px;
        .title{
            font-size: 16px;
            font-family: Noto Sans S Chinese;
            font-weight: 400;
            color: #16CEFC;
            margin-right: 10px;
            white-space: nowrap;
        }
        .text{
            font-size: 16px;
            word-break: break-all;
            font-family: Noto Sans S Chinese;
            font-weight: 400;
            color: #FFFFFF;
            .record{
                font-size: 14px;
                font-family: Noto Sans S Chinese;
                font-weight: 400;
                color: #077FFF;
            }
            .dan{
                font-size: 14px;
                font-family: Noto Sans S Chinese;
                font-weight: 400;
                color: #FF004E;
            }
            .pic{
                width: 276px;
                height: 212px
            }
            .line{
                width: 350px;
                height: 1px;
                background: #ECF0F1;
            }
        }
    }
    .showPic{
        position: fixed;
        top: 0;
        left: 0;
        z-index: 3000;
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0,0,0,.7);
    }
</style>